<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>焊客e家-找回密码</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/login.css">

	</head>

	<body>
		<div class="header innerHead ">
			<div class="main nav innerNav">
				<div class="fl logo"><img src="images/find_password_logo.png" alt=""></div>
				<p class="fr rt_text rt_login">
					<a href="./login.html">登录</a>
					<i class="line"></i>
					<a href="./register.html">立即注册</a>
				</p>
			</div>
		</div>

		<div class="container_main">
			<!-- 第一步验证账户 -->
			<div class="content_box reg_box pass_box ">
				<div class="flow_chart">
					<img src="images/yz_img_a.png" alt="">
					<ul class="step_list">
						<li class="fl current">验证账户</li>
						<li class="fr">完成</li>
						<li class="mid">重置密码</li>
					</ul>
				</div>

				<form action="" class="login_form">
					<p class="label">手机号</p>
					<div class="phone_num">
						<input type="text" class="ipt" placeholder="请输入手机号">
						<span class="fr get_code" style="color:#024ea3">获取验证码</span>
					</div>
					<p class="label">验证码</p>
					<input type="text" class="ipt" placeholder="请输入手机验证码 ">

					<button type="button" class="login_btn">验证</button>
				</form>
			</div>
			<!-- 第二步重置密码 -->
			<div class="content_box reg_box pass_box display_none">
				<div class="flow_chart">
					<img src="images/yz_img_b.png" alt="">
					<ul class="step_list">
						<li class="fl " style="color:#7eade2">验证账户</li>
						<li class="fr">完成</li>
						<li class="mid current">重置密码</li>
					</ul>
				</div>

				<form action="" class="login_form">
					<p class="label">新密码</p>
					<input type="text" class="ipt" placeholder="请输入新密码 ">
					<p class="label">确认密码</p>
					<input type="text" class="ipt" placeholder="请再次输入您的密码">

					<button type="button" class="login_btn">确定</button>
				</form>
			</div>
			<!-- 第三步完成 -->
			<div class="content_box reg_box pass_box display_none" style="padding-bottom:90px;margin-bottom:250px;">
				<div class="flow_chart">
					<img src="images/yz_img_c.png" alt="">
					<ul class="step_list">
						<li class="fl " style="color:#7eade2">验证账户</li>
						<li class="fr current">完成</li>
						<li class="mid" style="color:#7eade2">重置密码</li>
					</ul>
				</div>
				<div class="success_box">
					<img class="fl" src="images/accomplish.png" alt="">
					<p class="set_success">新密码设置成功!</p>
					<p class="hint">请牢记您新设置的密码。
						<a href="./index.html">返回首页</a>
					</p>
				</div>
			</div>
		</div>
		<!--底部-->
		<div class="footer">
			<div class="main footer_content ovw">
				<div class="fl contact">
					<div class="fl img_box"><img src="images/service.png" alt=""></div>
					<div class="fl text">
						<p class="label">联系我们</p>
						<p class="phone_number">400-8208-820</p>
						<p class="work_time">工作时间（工作日）9:00 - 18:00</p>
					</div>
				</div>
				<dl>
					<dt><a href="">友情链接</a></dt>
					<dd>
						<a href="">阿里巴巴</a>
					</dd>
					<dd>
						<a href="">新浪微博</a>
					</dd>
					<dd>
						<a href="">腾讯微博</a>
					</dd>
					<dd>
						<a href="">百度论坛</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="">服务</a></dt>
					<dd>
						<a href="">智能对接</a>
					</dd>
					<dd>
						<a href="">焊客圈</a>
					</dd>
					<dd>
						<a href="">焊客圈众创</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="">帮助中心</a></dt>
					<dd>
						<a href="">如何发布对接</a>
					</dd>
					<dd>
						<a href="">如何成为供应商</a>
					</dd>
					<dd>
						<a href="">如何成为技术专家</a>
					</dd>
					<dd>
						<a href="">如何发表众创</a>
					</dd>
				</dl>
				<div class="fr download">
					<p class="title">移动端下载</p>
					<div class="fl code_box">
						<img src="images/code_a.png" alt="">
						<p>IOS下载</p>
					</div>
					<div class="fl code_box">
						<img src="images/code_b.png" alt="">
						<p>安卓下载</p>
					</div>
				</div>
			</div>
			<p class="footer_text">Copyright@ 沪ICP备2015234568号 - 2015 沪公安网备案 201520150201502015088888888号</p>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.1.9.1.js"></script>
	<script>
		$(function() {
			// 计时器
			(function() {
				var i = 60;
				jsq = null;

				function demo() {
					jsq = setInterval(function() {
						i--;
						console.log(i);
						$(".get_code").text(i + "s后重新发送");
						if(i < 1) {
							clearInterval(jsq);
							$(".get_code").text("点击后重新发送");
							jsq = null;
							i = 60;
						}

					}, 1000);
				}
				$(".get_code").click(function() {
					if(jsq != null) {
						return;
					}
					demo();
				});
			})();

			// 点击按钮 , 切换下一个步骤显示
			$(".login_btn").each(function(el, i) {
				$(this).click(function() {
					$(".pass_box").eq(el + 1).show().siblings(".pass_box").hide();
				})
			})

		})
	</script>

</html>